<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../demo/demo.css">
    <title>Document</title>
</head>

<body>
    <div class="content">
        <h2>青春不常在，抓紧谈恋爱</h2>
        <form action="" method="post" class="form">
            <!-- 单选按钮 -->
            <div class="flex">
                <label>性别</label>
                <div class="margin">
                    <input type="radio" name="sex" value="male">男
                    <input type="radio" name="sex" value="female">女
                </div>
            </div>
            <!-- 下拉列表 -->
            <div class="flex">
                <label for="country">生日</label>
                <div class="margin">
                    <select id="country" name="country">
                        <option value="cn" selected="selected">--请选择年--</option>
                        <option value="cn">2023</option>
                        <option value="usa">2024</option>
                        <option value="uk">2025</option>
                    </select>
                    <select id="country" name="country">
                        <option value="cn" selected="selected">--请选择月--</option>
                        <option value="cn">1</option>
                        <option value="usa">2</option>
                        <option value="uk">3</option>
                    </select>
                    <select id="country" name="country">
                        <option value="cn" selected="selected">--请选择日--</option>
                        <option value="cn">4</option>
                        <option value="usa">5</option>
                        <option value="uk">6</option>
                    </select>
                </div>
            </div>
            <!-- 文本输入框 -->
            <div class="flex">
                <label for="name">所在地区</label>
                <div class="margin">
                    <input type="text" id="name" name="name" required>
                </div>
            </div>
            <!-- 婚姻状况 -->
            <div class="flex">
                <label>婚姻状况</label>
                <div class="margin">
                    <input type="radio" id="male" name="gender" value="male" checked>
                    <label for="male">未婚</label>
                    <input type="radio" id="female" name="gender" value="female">
                    <label for="female">已婚</label>
                    <input type="radio" id="female" name="gender" value="female">
                    <label for="female">离婚</label>
                </div>
            </div>
            <!-- 文本输入框 -->
            <div class="flex">
                <label for="name">学历</label>
                <div class="margin">
                    <input type="text" id="name" name="name" required>
                </div>
            </div>            
            <!-- 喜欢的类型 -->
            <div class="flex">
                <label for="">喜欢的类型</label>
                <div class="margin">
                    <input type="checkbox" name="vehicle" value="Bike">妩媚的
                    <input type="checkbox" name="vehicle" value="Car">可爱的
                    <input type="checkbox" name="vehicle" value="Car">小鲜肉
                    <input type="checkbox" name="vehicle" value="Car">老腊肉
                    <input type="checkbox" name="vehicle" value="Car">都喜欢
                </div>
            </div>           
            <!-- 自我介绍 -->
            <div class="flex">
                <label for="">自我介绍</label>
                <div class="margin">
                    <textarea name="" id="">自我介绍</textarea>
                </div>               
            </div>
            <!-- 提交按钮 -->
            <div class="btn">
                <input type="submit" value="免费注册">
                <br>
                <!-- 复选框 -->
                <input type="checkbox" id="subscribe" name="subscribe" checked>
                <label for="subscribe">我同意注册条款和会员加入标准</label>
                <br>
                <a href="#">我是会员，立即登录</a>
            </div>
        </form>
        <div class="footer">
            <h2>我承诺</h2>
            <ul>
                <li>年龄18岁、单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚寻找另一半</li>
            </ul>
        </div>
    </div>
</body>

</html>